<template>
	<jf-navigation>
		<view>{{$t('index.setting.problem.navigation')}}</view>
	</jf-navigation>
	
	<view class="problem_item">
		<view class="problem_item_title">1. 这是第一个常见问题</view>
		<view class="problem_item_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo…</view>
	</view>
	
	<view class="problem_item">
		<view class="problem_item_title">1. 这是第一个常见问题</view>
		<view class="problem_item_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo…</view>
	</view>
</template>

<script lang="ts" setup>
	import { getProblem } from "@/api/common"
	import { nextTick, onMounted, reactive } from "vue";
	
	const data = reactive({
		list: [],
		locale: ''
	})
	
	onMounted(() => {
		nextTick(() => {
			data.locale = uni.getLocale().replace('_','-')
			getProblem().then((res:any) => {
				data.list = res.data
			})
		})
	})
</script>

<style lang="scss">
	.problem_item{
		width: 686rpx;
		padding: 32rpx 24rpx;
		background: #ffffff;
		margin: 32rpx 0 0 32rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		.problem_item_title{
			font-weight: 500;
			line-height: 42rpx;
			font-size: 30rpx;
		}
		.problem_item_text{
			font-weight: 400;
			color: #535A69;
			line-height: 40px;
			font-size: 26rpx;
			margin-top: 16rpx;
		}
	}
</style>